<template>
  <div class="app-container">
    <div class="header">
      <el-form :inline="true" class="demo-form-inline" size="small">
        <el-form-item label="学号">
          <el-input v-model="query.stuId" placeholder="请输入学号" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getPageStudent">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="addStudent">添加学生信息</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      ref="multipleTable"
      v-loading="loading"
      tooltip-effect="dark"
      style="width: 100%"
      :data="tableData"
      border
      stripe
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        prop="stuId"
        label="学号"
        align="center"
      />
      <el-table-column
        prop="stuName"
        label="姓名"
        align="center"
      />
      <el-table-column
        prop="stuSex"
        label="性别"
        align="center"
      />
      <el-table-column
        prop="stuAge"
        label="年龄"
        align="center"
      />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)"
          >编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination-container"
      background
      :current-page="query.current"
      :page-sizes="[1,10, 20, 30, 40]"
      :page-size="query.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="query.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <el-dialog
      title="添加用户数据"
      :visible.sync="dialogVisible2"
    >

      <el-form ref="form" inline label-width="120" size="small">
        <el-form-item prop="stuId" label="学号">
          <el-input v-model="student.stuId" type="text" clearable />
        </el-form-item>
        <el-form-item prop="stuName" label="姓名">
          <el-input v-model="student.stuName" type="text" style="width: 100px;" clearable />
        </el-form-item>
        <el-form-item prop="stuSex" label="性别">
          <!--          <el-input clearable v-model="student.stuSex"></el-input>-->
          <el-select v-model="value" style="width: 100px;" placeholder="请选择">
            <el-option
              v-for="item in sexs"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="submitStu">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { add, del, delStu, edit, get, getStu, list, page, pageStu, editStu, addStu } from '@/api/table'
// import user from '@/store/modules/user'

export default {
  data() {
    return {
      tableData: [],
      query: {
        current: 1,
        total: 0,
        size: 10,
        stuId: ''
      },
      user: {
        id: undefined,
        userName: 'undefined',
        age: 0,
        nickName: ''
      },
      student: {
        stuId: 0, // 学号主键
        stuName: '', // 名字
        stuAge: 0, // 年龄
        stuSex: 0 // 性别
      },
      teacher: {
        tecId: undefined,
        tecName: ''
      },
      score: {
        couId: undefined,
        couName: '',
        score: ''
      },
      course: {
        couId: undefined,
        couName: '',
        tecId: undefined
      },
      // 性别选择
      sexs: [{
        value: '选项1',
        label: '男'
      }, {
        value: '选项2',
        label: '女'
      }],
      value: ''

    }
  },
  created() {
    // this.getList()
    this.getPageStudent()
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    getList() {
      list().then((resp) => {
        this.tableData = resp.data
      }).catch((err) => {
        console.log(err)
      })
    },
    getPage() {
      this.loading = true
      page(this.query).then((resp) => {
        this.tableData = resp.data
        this.query.total = resp.total
        this.loading = false
      })
    },
    // 查询全部数据
    getPageStudent() {
      this.loading = true
      // eslint-disable-next-line eqeqeq
      if (this.query.stuId != '') {
        // console.log(this.query.stuId)  //输入查询的值
        getStu(this.query).then((resp) => {
          this.tableData = resp.data
          this.loading = false
        })
      } else {
        pageStu(this.query).then((resp) => {
          this.tableData = resp.data
          this.query.total = resp.total
          this.loading = false
          console.log(resp.data)
        })
      }
    },

    handleSizeChange(val) {
      this.query.size = val
      this.getPage()
    },
    handleCurrentChange(val) {
      this.query.current = val
      this.getPage()
    },
    /*  handAdd() {
        this.dialogVisible = true
      },*/
    // 添加学生
    addStudent(val) {
      this.dialogVisible2 = true
    },
    submit() {
      const messageBox = this.$message({
        message: '正在提交数据，请稍后',
        iconClass: 'el-icon-loading'
      })
      // eslint-disable-next-line eqeqeq
      if (this.student.stuId != undefined) {
        editStu(this.student).then(resp => {
          this.student = {}
          this.getPage()
          messageBox.close()
          this.dialogVisible2 = false
          this.$message.success('修改成功')
        })
      } else {
        add(this.student).then((resp) => {
          this.student = {}
          this.getPage()
          messageBox.close()
          this.dialogVisible2 = false
          this.$message.success('添加成功')
        })
      }
    },
    // 添加学生信息
    submitStu() {
      // eslint-disable-next-line no-unused-vars
      const messageBox = this.$message({
        message: '正在提交数据，请稍后',
        iconClass: 'el-icon-loading'
      })
    },
    // 删除其中一个学生
    handleDelete(row) {
      this.$confirm('是否继续删除数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delStu(row.stuId).then(resp => {
          this.getPageStudent()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {

      })
    }
  }
}
</script>
<style scoped>
.btntype{
  width: 70px;
  height: 40px;
  margin-left: 20px;
  color: #4e61d5;
  background: #e4efed;
}
</style>
